<!DOCTYPE html>
<html>

<head>
	<link rel="stylesheet" type="text/css" href="../css/layui.css" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../css/laydate.css" />
	<title>教务-班级管理-课程表</title>
	<style type="text/css">
		.curriculum_right .layui-table tbody tr:hover{
			background-color: #FFFFFF;
		}
		.curriculum_right .layui-table td, .curriculum_right  .layui-table th {
			position: relative;
			padding: 9px 15px;
			box-sizing: border-box;
			min-height: 20px;
			line-height: 20px;
			width: 150px;
			height: 100px;
			font-size: 24px;
			text-align: right;
		}
			
		.curriculum_right .tablemou th{
			border: none;
			text-align: center;
			color: #579fe9;
			
		}
		.curriculum_right .tableLeft tr td:hover{
			background-color: #fff;
		}
		.curriculum_right .tableLeft tr td{
			border: none;
		}
		.curriculum_right .tablemou td:hover{
			border:1px solid #caddf1;
			color: #FFF;
			background-color: #579fe9;
		}
		.curriculum_right .conflict{
			border:1px solid #efebeb;
			color: #FFF;
			background-color: #e95757;
		}
		.curriculum_right .normal{
			border:1px solid #caddf1;
			color: #FFF;
			background-color: #579fe9;
		}
		.showCon{
			width: 100%;
			color: #FFF;
			text-align: center;
		}
		.showCon .className{
			font-size: 18px;
		}
		.showCon .teacher{
			font-size: 14px;
			display: block;
			margin: 6px 0 12px 0;
		}
		.showCon .zt{
			border-radius: 12px;
			display: block;
			margin: 0 auto;
			font-size: 14px;
		}
		.noClass{
			background-color: #f0a001;
		}
		.noClass .zt{
			background-color: #c68c17;
		}
		.inClass{
			background-color: #59b025;
		}
		.inClass .zt{
			background-color: #407f1a;
		}
		.alreadyClass{
			background-color: #579fe9;
		}
		.alreadyClass .zt{
			background-color: #417ab5;
		}
		/*周弹窗*/
		#popShowCon{
			width: 267px;
			height: 170px;
			border-radius: 10px;
			padding: 8px 15px;
			box-sizing: border-box;
			font-size: 18px;
			display:none;
			background-color: #FFF;
		}
		#popShowCon span{
			display: block;
			color: #999999;
		}
		#popShowCon .layui-btn{
			margin-top: 15px;
		}
		#popShowCon .layui-btn:first-of-type{
			margin-right: 50px;
		}
		/*月弹窗*/
		#popShowCon1{
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			font-size: 18px;
			display:none;
			background-color: #cedbeb;
			overflow-y: auto;
		}
		#popShowCon1 .dateNow{
			line-height: 118px;
			padding-left: 50px;
			box-sizing: border-box;
			font-size: 24px;
		}
		#popShowCon1 .list{
			height: 200px;
			position: relative;
			padding: 30px 0 30px 84px;
			box-sizing: border-box;
		}
		#popShowCon1 .list:hover{
			background-color: #d8e4f3;
		}
		#popShowCon1 .list:hover .del{
			display: block;
		}
		#popShowCon1 .list:before{
			content: '';
			width: 4px;
			height: 140px;
			background-color: #579fe9;
			left: 50px;
			position: absolute;
		}
		#popShowCon1 .list .date{
			margin: 15px 0 10px;
		}
		#popShowCon1 .list .class{
			margin-top: 10px;
		}
		#popShowCon1 .list span{
			color: #579fe9;
		}
		#popShowCon1 .list .del{
			font-size: 18px;
			color: #579fe9;
			position: absolute;
			top: 20px;
			right: 50px;
			display: none;
		}
	</style>
</head>

<body>
	<form action="" class="layui-form">
		<div id="main" class="layui-container">
			<div class="header layui-row">
				<div class=" headerList">
					<i class="Educational_icon"></i>
					<span class="layui-breadcrumb" lay-separator=">">
						<a href="javascript:;">教务</a>
						<a href="javascript:;">班级管理</a>
						<a href="javascript:;">
							<cite>课程表</cite>
						</a>
					</span>
				</div>
			</div>
			<div class="main layui-row">
				<div class="layui-row main_header">
					<blockquote class="layui-elem-quote">课程表</blockquote>
					<div class="list_right">
						<span class="list_bar">本周</span>
						<span>本月</span>
					</div>
				</div>
				<div class="layui-row main_con" style="padding-bottom: 112px;">
					<div class="layui-col-md3 curriculum_left">
						<div class="layui-row tips">
							<div class="layui-row">
								<span class="layui-badge-dot layui-bg-blue"></span>正常排课
							</div>
							<div class="layui-row">
								<span class="layui-badge-dot"></span>冲突排课
							</div>
						</div>
						<div class="layui-row campus">
							<div class="list_con layui-input-block">
								<img src="../images/js.png" class="campus_icon">
								<select name="campus" lay-verify="required">
									<option value="">请选择校区</option>
									<option value="0">长宁北新泾校区</option>
									<option value="1">北新泾校区</option>
									<option value="2">长宁校区</option>
									<option value="3">长北泾校区</option>
								</select>
							</div>
							<div class="campus_class">
								<ul>
									<li>教室001</li>
									<li>教室002</li>
									<li>教室003</li>
									<li class="li_bar">教室004</li>
									<li>教室005</li>
									<li>教室006</li>
									<li>教室007</li>
									<li>教室008</li>
									<li>教室009</li>
									<li>教室010</li>
								</ul>
							</div>
							<hr class="hr_blue">
						</div>
					</div>
					<div class="layui-col-md9 curriculum_right">
						<div class="container">
							<div class="header_time">
								<div class="data" style="text-align: center;font-size: 18px;">
									2018年8月第一周
								</div>
							</div>
							<div class="tableLeft layui-table"style="width: auto;float: left;">
								<table>
									<tbody>
										<tr>
											<td></td>
										</tr>
										<tr>
											<td>第一节</td>
										</tr>
										<tr>
											<td>第二节</td>
										</tr>
										<tr>
											<td>第三节</td>
										</tr>
										<tr>
											<td>第四节</td>
										</tr>
										<tr>
											<td>第五节</td>
										</tr>
										<tr>
											<td>第六节</td>
										</tr>
										<tr>
											<td>第七节</td>
										</tr>
									</tbody>
								</table>
								
							</div>
							<table class="layui-table tableRight" style="width: auto;">
							<colgroup>
								<col width="150">
								<col width="150">
								<col width="150">
								<col width="150">
								<col width="150">
								<col width="150">
								<col width="150">
								<col>
							</colgroup>
							<thead>
								<tr>
								<th>周日</th>
								<th>周一</th>
								<th>周二</th>
								<th>周三</th>
								<th>周四</th>
								<th>周五</th>
								<th>周六</th>
								</tr> 
							</thead>
							<tbody>
								<tr>
								<td></td>
								<td></td>
								<td class="inClass">
									<div class="showCon" data-type="read">
										<h3 class="className">小小演说家</h3>
										<span class="teacher">主讲老师：Mark</span>
										<span class="zt">上课中</span>
									</div>
								</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								</tr>
								<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								</tr>
								<tr>
								<td class="alreadyClass">
									<div class="showCon" data-type="read">
										<h3 class="className">小小演说家</h3>
										<span class="teacher">主讲老师：Mark</span>
										<span class="zt">上课中</span>
									</div>
								</td>
								<td></td>
								<td></td>
								<td></td>
								<td class="noClass">
									<div class="showCon" data-type="read">
										<h3 class="className">小小演说家</h3>
										<span class="teacher">主讲老师：Mark</span>
										<span class="zt">上课中</span>
									</div>
								</td>
								<td></td>
								<td></td>
								</tr>
								<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								</tr>
								<tr>
								<td></td>
								<td class="alreadyClass">
									<div class="showCon" data-type="read">
										<h3 class="className">小小演说家</h3>
										<span class="teacher">主讲老师：Mark</span>
										<span class="zt">上课中</span>
									</div>
								</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								</tr>
								<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								</tr>
								<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								</tr>
							</tbody>
							</table>
						</div>
						<div class="container" style="display: none;">
							<div class="header_time">
								<div class="data" style="text-align: center;font-size: 18px;">
									2018年8月
								</div>
							</div>
							<table class="layui-table tablemou">
							  <colgroup>
								<col width="150">
								<col width="150">
								<col width="150">
								<col width="150">
								<col width="150">
								<col width="150">
								<col width="150">
								<col>
							  </colgroup>
							  <thead>
								<tr>
								  <th>周日</th>
								  <th>周一</th>
								  <th>周二</th>
								  <th>周三</th>
								  <th>周四</th>
								  <th>周五</th>
								  <th>周六</th>
								</tr> 
							  </thead>
							  <tbody>
								<tr>
								  <td class="normal"  data-type="check">1</td>
								  <td class="normal" data-type="check">2</td>
								  <td>3</td>
								  <td class="normal" data-type="check">4</td>
								  <td>5</td>
								  <td>6</td>
								  <td class="normal" data-type="check">7</td>
								</tr>
								<tr>
								  <td class="normal" data-type="check">8</td>
								  <td>9</td>
								  <td class="normal" data-type="check">10</td>
								  <td class="normal" data-type="check">11</td>
								  <td>12</td>
								  <td>13</td>
								  <td class="normal" data-type="check">14</td>
								</tr>
								<tr>
								<td class="normal" data-type="check">15</td>
								<td>16</td>
								<td>17</td>
								<td>18</td>
								<td class="normal" data-type="check">19</td>
								<td class="normal" data-type="check">20</td>
								<td>21</td>
								</tr>
								<tr>
								<td>22</td>
								<td class="conflict" data-type="check">23</td>
								<td>24</td>
								<td>25</td>
								<td>26</td>
								<td>27</td>
								<td>28</td>
								</tr>
								<tr>
								<td>29</td>
								<td>30</td>
								<td>31</td>
								<td>1</td>
								<td>2</td>
								<td>3</td>
								<td>4</td>
								</tr>
							  </tbody>
							</table>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	<div id="popShowCon">
		<h3 class="className">小小演说家</h3>
		<span class="teacher">主讲老师：Mark</span>
		<span class="date">上课日期：2018-07-24</span>
		<span class="teacher">上课时间：15:00-17:00</span>
		<button class="layui-btn layui-btn-sm " style="width: 76px;height: 24px;border-radius: 12px;line-height: 24px;font-size: 14px;">
			<i class="layui-icon">&#xe642;</i>编辑
		</button>
		<button class="layui-btn layui-btn-sm " style="width: 76px;height: 24px;border-radius: 12px;line-height: 24px;font-size: 14px;background-color: #f95656;">
			<i class="layui-icon">&#xe640;</i>删除
		</button>
	</div>
	<div id="popShowCon1">
		<div class="dateNow">2018-07-23</div>
		<div class="list">
			<h3 class="className">小小演说家</h3>
			<div class="date">时间：<span>15:00-17:00</span></div>
			<div class="teacher">老师：<span>Mark</span></div>
			<div class="class">教室：<span>A102</span></div>
			<i class="layui-icon del">&#xe640;</i>
		</div>
		<div class="list">
			<h3 class="className">小小演说家</h3>
			<div class="date">时间：<span>15:00-17:00</span></div>
			<div class="teacher">老师：<span>Mark</span></div>
			<div class="class">教室：<span>A102</span></div>
			<i class="layui-icon del">&#xe640;</i>
		</div>
		<div class="list">
			<h3 class="className">小小演说家</h3>
			<div class="date">时间：<span>15:00-17:00</span></div>
			<div class="teacher">老师：<span>Mark</span></div>
			<div class="class">教室：<span>A102</span></div>
			<i class="layui-icon del">&#xe640;</i>
		</div>
	</div>
	</form>
	
<script src="../js/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
     layui.use(["layer",'form'], function(){
         var $=layui.jquery, layer = layui.layer, form=layui.form;
         //执行一个laydate实例
        var active = {
 					read:function(){
 						layer.open({
 							type:1,
							title:'',
							anim: 5,
 							content:$('#popShowCon')
 						})
 					},
					check:function(){
						layer.open({
							area: ['35%', '68%'] ,
							offset: 'rb',
							type:1,
							title:'',
							anim: 5,
							content:$('#popShowCon1')
						})
					}
 				}
 				 $('.showCon').on('click', function(){
						var type = $(this).data('type');

						active[type] && active[type].call(this);
				});
				$('.normal , .conflict').on('click', function(){
						var type = $(this).data('type');

						active[type] && active[type].call(this);
				});

		$('.list_right span').on('click',function(){
			var index=$(this).index();
			$(this).addClass('list_bar').siblings().removeClass('list_bar');
			$('.curriculum_right .container').eq(index).show().siblings().hide();
		})
     });
</script>
</body>

</html>
